@use "sass:list";
@charset "UTF-8";
// Copyright (C) 2019 Checkmk GmbH - License: GNU General Public License v2
// This file is part of Checkmk (https://checkmk.com). It is subject to the terms and
// conditions defined in the file COPYING, which is part of this source code package.

@use "_mixins" as *;

/* Styles used in all Multisite pages, for example in the
   status GUI, in WATO pages and in "Add snapin". These
   styles are not used in the sidebar and in Mobile. */

/*-------------------------------------------------------------------------.
|                   ____                           _                       |
|                  / ___| ___ _ __   ___ _ __ __ _| |                      |
|                 | |  _ / _ \ '_ \ / _ \ '__/ _` | |                      |
|                 | |_| |  __/ | | |  __/ | | (_| | |                      |
|                  \____|\___|_| |_|\___|_|  \__,_|_|                      |
|                                                                          |
+--------------------------------------------------------------------------+
| General styles used in the pages                                         |
'-------------------------------------------------------------------------*/

h1,
h2,
h3,
h4 {
  color: $font-color;
}

h3:not(.table) {
  font-size: $font-size-large;
  font-weight: $font-weight-default;
}

h3.table {
  @include table-header-mixin;
}

div.two_factor_overview > table {
  margin-top: 2 * $spacing;

  &:first-of-type {
    margin-top: $spacing;
  }

  table.groupheader {
    @include table-header-mixin;
  }

  td > div,
  td > i {
    display: block;
    margin: $spacing 0;
  }

  div.backup_codes {
    overflow: hidden;

    div.legend,
    div.legend + div.inline {
      float: left;
    }

    div.legend {
      max-width: 230px;
      overflow: hidden;
      white-space: nowrap;

      + div.inline {
        margin-left: 0.5 * $spacing;
      }
    }

    + div {
      clear: left;
    }
  }

  input.button {
    margin-left: 0;
  }
}

form.register_totp a.copy_to_clipboard {
  display: inline-block;
  margin-top: $spacing-half;
  text-decoration: none;

  img {
    margin-left: $spacing-half;
  }
}

/*-------------------------------------------------------------------------.
|                                       _                                  |
|                       _ __ ___   __ _(_)_ __                             |
|                      | '_ ` _ \ / _` | | '_ \                            |
|                      | | | | | | (_| | | | | |                           |
|                      |_| |_| |_|\__,_|_|_| |_|                           |
|                                                                          |
+--------------------------------------------------------------------------+
| Styles for the main frame (its body, header, footer, etc.)               |
'-------------------------------------------------------------------------*/

body {
  color: $font-color;

  a,
  a:link,
  a:visited {
    color: $font-color;
  }

  &.hidden:after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba($black, 0.5);
    content: "";
  }

  &.main {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
    padding: 0 0 0 $spacing;
    margin: 0;
    font-family: $font-family-default;
    font-weight: $font-weight-default;
    color: $font-color;
    background: $bg-color;

    /* Can be toggled with N/n display option */
    &.inline {
      padding: 0;
      background: none;
    }

    /* Special mode for creating screenshots of single elements. Omit background.
       This can be selected in multisite.mk with screenshotmode = True or screenshotmode=1
       on the URL */
    &.screenshotmode {
      background-color: $white;
      background-image: url("");
    }

    /* The content page header containing the title, user, date */
    table.header {
      width: 100%;
      height: 64px;
      max-width: 100%;
      padding: 8px 20px;
      margin: 0 0 5px;
      color: $font-color-white;
      background: $bg-color;
      border-spacing: 0;

      td {
        overflow: hidden;
        color: $font-color-white;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;

        &.heading {
          height: 31px;
          max-width: 100px;
          padding-left: 0;
          font-size: $font-size-page-title;

          img {
            width: 24px;
            height: 24px;
            margin-right: 3px;
            vertical-align: middle;
          }

          a,
          a:hover {
            text-decoration: none;
          }

          a,
          .popup_menu span,
          .popup_menu & span {
            color: $font-color;
          }
        }

        &.right {
          width: 1%;
          color: $font-color;
          text-align: right;

          img {
            width: 19px;
            height: 19px;
            vertical-align: middle;
          }

          a.head_logo img {
            width: 20px;
            height: 23px;
            margin: 0 0 1px 5px;

            &:hover {
              opacity: 0.5;
              filter: alpha(opacity=50);
            }
          }

          * {
            color: $font-color-dimmed;
          }
        }
      }
    }

    div#main_page_content {
      flex: 1 1 auto;
      height: 100%;
      padding-right: $simplebar-track-width;
      padding-bottom: 20px;
      overflow: auto;

      > div.simplebar-track {
        background-color: $bg-color;
      }
    }
  }
}

#reload_pause {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 40;
  display: block;
  width: 90px;
  height: 90px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  background-color: $black;
  border-radius: 5px;
  opacity: 0.8;
  filter: alpha(opacity=80); /* For IE8 and earlier */
}

.pause_bar {
  display: inline-block;
  width: 20px;
  height: 60px;
  margin-top: 5px;
  margin-bottom: 5px;
  background-color: $white;
  border-radius: 5px;
  opacity: 0.9;
  filter: alpha(opacity=90); /* For IE8 and earlier */

  &.p1 {
    margin-right: 5px;
    margin-left: 15px;
  }

  &.p2 {
    margin-right: 15px;
    margin-left: 5px;
  }
}

#reload_pause_counter {
  font-size: $font-size-large;
  font-weight: $font-weight-bold;
  color: $font-color-light-grey;
  text-align: center;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

/*-------------------------------------------------------------------------.
|            ____        _          _____     _     _                      |
|           |  _ \  __ _| |_ __ _  |_   _|_ _| |__ | | ___                 |
|           | | | |/ _` | __/ _` |   | |/ _` | '_ \| |/ _ \                |
|           | |_| | (_| | || (_| |   | | (_| | |_) | |  __/                |
|           |____/ \__,_|\__\__,_|   |_|\__,_|_.__/|_|\___|                |
|                                                                          |
+--------------------------------------------------------------------------+
| Styles for table that shows rows of data. Such tables are used in the    |
| Status-GUI, in WATO and in custom modules that use similar tables.       |
'-------------------------------------------------------------------------*/

#data_container {
  min-width: min-content;
}

table.data {
  width: 100%;
  // This basically has no effect since it is treated as a minimum height.
  // It is needed so that the height attribute of nested elements has an
  // effect. It is used e.g. in td.state of _status.scss.
  // See: https://www.w3.org/TR/CSS22/tables.html#height-layout
  // And: https://stackoverflow.com/a/56913789
  height: 1px;
  padding: 0;
  margin: 0;
  color: $font-color;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;

  .checkbox_hover {
    background-attachment: fixed;
    background-image: url("images/checkbox_hover_bg.png");
  }

  th {
    height: 24px;
    padding: 0 8px;
    letter-spacing: $letter-spacing-table;
    color: $font-color-dimmed;
    text-align: left;
    vertical-align: middle;
    background-color: $odd-tr-bg-color;
    position: sticky;
    top: 0;
    z-index: 10;

    &.center {
      text-align: center;
    }

    &.right {
      text-align: right;
    }

    /* Table header links (For sorting) */
    &.sort:hover {
      color: $font-color;
      cursor: pointer;
      background-color: $data-th-sort-hover-bg-color;
    }
  }

  td {
    letter-spacing: $letter-spacing-default;
    color: $font-color;

    &.buttons {
      width: 1%;
      white-space: nowrap;

      &.visuals {
        width: 75px;
      }
    }

    /* e.g. numeric columns on alert statistics views */
    &.count {
      font-weight: $font-weight-bold;
      text-align: right;
      white-space: nowrap;
    }

    &.number {
      white-space: nowrap;
    }

    &.nobr {
      white-space: nowrap;
    }

    &.center {
      text-align: center;
    }

    &.unused {
      color: $font-color-dimmed;
    }

    &.nowrap {
      white-space: nowrap;
    }
  }

  tr.data {
    overflow: hidden;
    box-sizing: border-box;
    transition: all 0.15s ease-in;

    /* TODO: Refactor these messy and complicated styles */
    > td {
      vertical-align: middle;

      a:hover {
        color: $font-color;
      }

      &:not(.state):not(.hstate),
      &.count {
        height: 26px;
        padding: 2px 8px; /* spacing in every row */
        text-overflow: $td-text-overflow;
      }

      ul {
        padding-left: $spacing;
      }
    }

    td.checkbox {
      width: 20px;

      input {
        margin: 0;
      }
    }
  }

  tr td.gap,
  tr td.fillup {
    background: $td-gap-bg-color;
    border: 1px solid $td-gap-bg-color;
  }

  a {
    color: $font-color;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  th input.checkgroup {
    width: 16px;
    height: 16px;
    padding: 4px;
    margin: 0;
    font-size: $font-size-small;
    font-weight: $font-weight-bold;
    line-height: 5px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
  }

  tr.actions {
    td {
      padding: 5px;
    }

    div {
      display: inline-block;
    }

    td div.search input[type="text"] {
      margin-right: 2px;
    }

    &.no_match td {
      padding: 5px;
    }
  }

  tr div.toggle_actions {
    position: relative;
    padding-left: 14px;
  }

  tr a.toggle_actions {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;

    img {
      position: relative;
      top: 2px;
      width: 8px;
      height: auto;
      padding: 0;
      vertical-align: top;
    }
  }
}

// Table headers inside foldable containers should stack below the foldable header
div.foldable_wrapper {
  --foldable-header-height: #{$spacing-double + $spacing-half};

  table.data {
    th {
      top: var(--foldable-header-height);
    }
  }
}

table.data .popup_menu,
body.main table.data .popup_menu {
  color: $font-color;
}

td.narrow {
  width: 10px;
}

td.wide {
  width: 100%;
}

/* Group header used in table, box and tiled layout */
table.groupheader {
  @include table-header-mixin;
  width: 100%;
  margin: 0 0 $h3-margin-bottom;
  position: sticky;
  top: 0;
  z-index: 15;

  td {
    text-align: left;
    white-space: nowrap;

    &:last-child {
      width: 100%;
    }
  }

  a {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

table.data {
  --group-header-height: 24px;
  td.groupheader {
    position: sticky;
    top: 0;
    z-index: 12;
    padding: 0;
  }

  /* When group headers are present, table headers need to stick below them */
  &:has(tr.groupheader) th,
  tr.groupheader ~ tr th {
    top: var(--group-header-height);
  }

  /* When preceded by a separate group header table, adjust table header position */
  table.groupheader + & th {
    top: var(--group-header-height);
  }
}

tr.data.grouped_row_header {
  td {
    cursor: pointer;
  }

  img.treeangle,
  img.treeangle.nform.open,
  img.treeangle.nform.closed {
    margin-left: 0;
  }
}

tr.data.group_end {
  border-bottom: 2px solid $color-table-border;
}

tr.groupheader td {
  padding: 0;
  margin: 0;
  font-weight: $font-weight-bold;
  color: $font-color;
  background: transparent;
}

#options_d_comment div a img.iconbutton {
  vertical-align: top;
}

img.iconbutton,
img.icon {
  width: 16px;
  height: 16px;
  padding: 0 2px;
  vertical-align: middle;

  &.png {
    width: 20px;
    height: 20px;
    padding: 0;
  }

  &.reload_failed {
    filter: sepia(100%);
    -webkit-filter: sepia(100%);
  }

  &.colorless {
    filter: grayscale(100%);
  }
}

img.iconbutton:hover {
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}

/* reschedule check icon */
img.iconbutton.reloading,
img.icon.reloading {
  animation: spin 1s linear infinite;
  -webkit-animation: spin 1s linear infinite;
  -moz-animation: spin 1s linear infinite;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* Table with captions on the left side. Used e.g. for man pages and werks */
table.data.headerleft tr {
  th {
    // Override generic th styling in a single header row
    font-weight: $font-weight-bold;
    color: $font-color;
    background-color: inherit;
  }

  th,
  td {
    padding: 5px $spacing;
    vertical-align: top;
  }

  td.nowiki p {
    margin: 0;
  }
}

table.data.headerleft > tbody {
  & > tr:nth-child(even) {
    background-color: $even-tr-bg-color;
  }

  & > tr:nth-child(odd) {
    background-color: $odd-tr-bg-color;
  }
}

/*-------------------------------------------------------------------------.
|                    _____                                                 |
|                   |  ___|__  _ __ _ __ ___  ___                          |
|                   | |_ / _ \| '__| '_ ` _ \/ __|                         |
|                   |  _| (_) | |  | | | | | \__ \                         |
|                   |_|  \___/|_|  |_| |_| |_|___/                         |
|                                                                          |
+--------------------------------------------------------------------------+
| Input forms (e.g. Filters, Commands, WATO)                               |
'-------------------------------------------------------------------------*/

input:not(.button),
input[type="text"],
input[type="password"],
select,
textarea,
#mk_side_search_field,
.tagify__input {
  $padding: 3px;

  height: ($input-field-height - 2 * $padding);
  padding: $padding 6px;
  color: $font-color;
  background-color: $input-background-color;
  background-image: none;
  border-radius: $theme-border-radius;
  box-shadow: none;
}

span.select2 .select2-selection {
  background-color: $input-background-color;

  &:focus {
    outline: none;
  }
}

.select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: transparent;
  .select2-selection__arrow {
    display: none;
  }
}

input[type="text"],
textarea {
  position: relative;
}

select,
textarea,
input[type="file"] {
  // textareas like e.g. comment fields should not have a fixed height
  height: auto;
}

input[type="text"],
input[type="password"] {
  vertical-align: middle;
}

select {
  vertical-align: middle;
}

input[type="radio"],
input[type="checkbox"] {
  margin-left: 0;
}

button {
  @include button-mixin;
}

input,
select {
  &.number {
    text-align: right;
  }

  &.button {
    @include button-mixin;
  }

  &[type="radio"] {
    width: auto;
    margin-bottom: 0;
  }
}

input.button {
  &:not([type="text"]),
  &:not([type="password"]) {
    padding: 6px 8px 4px;
  }
}

select,
textarea,
div.snapin select,
#mk_side_search_field {
  &.toggle_timespecific_parameter {
    display: block;
  }
}

input.toggle_timespecific_parameter {
  margin-top: 5px;
}

td.content hr {
  height: 1px;
  background-color: $line-color;
  border-style: none;
}

input.date,
input.time {
  font-family: $font-family-monospace;
}

.inputerror {
  input,
  select,
  textarea,
  div.snapin select,
  div.snapin & select,
  #mk_side_search_field,
  span.checkbox,
  span.select2 .select2-selection,
  > select {
    background-color: $input-error-bg-color;
  }

  span.checkbox {
    display: block;
    float: left;
    height: 17px;
    margin-right: 2px;

    input {
      margin: 1px;
    }
  }
}

span.checkbox {
  line-height: 14px;
}

.checkbox label::before {
  border: 1px solid $color-table-border-dark;
  border-radius: 2px;
  box-shadow: none;
}

/* Next-Generation forms */
table.nform {
  width: 100%;
  padding: 0;
  margin: $spacing 0;
  background: $bg-color-secondary;
  border-spacing: 0 0;
  border-radius: $theme-border-radius;
  box-shadow: 0 0 0 rgba($black, 0.1);
  empty-cells: show;

  &.closed {
    tr.heading a.more {
      display: none;
    }
  }

  body.main.screenshotmode & {
    background-color: $white;
    background-image: none;
  }

  tbody.closed {
    display: none;
  }

  tr.heading {
    height: auto;

    > td {
      vertical-align: middle;
      cursor: pointer;
      background-color: transparent;
      border-radius: $border-radius-top;
    }

    td {
      position: relative;
      height: auto;
      padding: 4px 10px 3px 9px;
      font-weight: $font-weight-bold;
      letter-spacing: $letter-spacing-table;
      background-color: $headline-color;
    }

    img.treeangle.nform {
      margin: 0 $spacing 0 0;
    }

    a.more {
      float: right;

      div::after {
        position: relative;
        top: 1px;
      }
    }
  }

  > tbody > tr > td {
    padding-bottom: $spacing-half;
    vertical-align: top;
  }

  tr td.legend {
    padding-right: 8px;
    padding-left: 10px;
    text-align: left;
    vertical-align: top;
    /* TODO: See if we can remove these two overflow-* styles. it seems to be sufficient to handle
             overflow within the following div.title styling */
    overflow-x: hidden;
    overflow-wrap: break-word;

    div.title {
      float: left;
      max-width: 390px;
      padding: 0 8px 0 0;
      overflow: hidden;
      letter-spacing: $letter-spacing-default;
      white-space: nowrap;
    }

    div.checkbox {
      float: right;
      margin-bottom: 3px;
    }
  }

  &.narrow td.legend {
    height: 18px;
  }

  td.content {
    padding-right: 10px;
    padding-left: 10px;

    span.checkbox {
      display: inline-block;
    }
  }

  &.narrow td.content {
    height: 18px;
    padding-bottom: 2px;
  }

  tr.top {
    height: 0; /* deflate vert space after heading */

    td {
      height: 0; /* deflate top vert space */
    }
  }

  tr.bottom td {
    height: 0; /* deflate bottom vert space */
  }

  td.reason {
    padding: 8px 4px;
  }

  input,
  select,
  textarea,
  #mk_side_search_field {
    & {
      margin: 0;
    }

    &.button {
      margin-right: 5px;
    }
  }

  hr {
    margin: 8px 0;
    background-color: $line-color;
  }

  .ruleset {
    margin-bottom: 8px;
  }

  tr.open td.content .checkbox {
    display: inline-block;
    margin-right: 8px;
    margin-left: 4px;
  }

  .listchoice td {
    height: $input-field-height;
    vertical-align: middle;
  }

  .title {
    color: $font-color;
  }

  #view_p_options_tbl {
    border-spacing: 4px;
  }

  > tbody > tr:nth-child(1) > td {
    padding-top: $spacing-half;
  }

  tr td.legend {
    width: 240px;
    min-width: 240px;

    div.title {
      max-width: 230px;

      &.withcheckbox {
        max-width: 200px;
      }
    }
  }

  &.wide tr td.legend {
    width: 460px;
    min-width: 460px;
    line-height: 22px;

    div.title {
      max-width: 500px;

      &.withcheckbox {
        max-width: 420px;
      }
    }
  }

  span.select2-container {
    margin: $input-field-margin;
    vertical-align: top;
  }

  input {
    margin: $input-field-margin;
    vertical-align: initial;
  }

  .vs_floating_text {
    @include floating-text-mixin;
  }
}

form.visual {
  margin-right: $spacing;
}

input.try_max_width,
textarea.try_max_width {
  width: calc(100% - #{$spacing});
  min-width: 10 * $spacing;
}

/*-------------------------------------------------------------------------.
|                         _   _      _                                     |
|                        | | | | ___| |_ __                                |
|                        | |_| |/ _ \ | '_ \                               |
|                        |  _  |  __/ | |_) |                              |
|                        |_| |_|\___|_| .__/                               |
|                                     |_|                                  |
+--------------------------------------------------------------------------+
|                                                                          |
'-------------------------------------------------------------------------*/

body.inline_help_as_text {
  div.help {
    display: flex;
  }
}

div.help {
  display: none;
  margin: 8px 0;

  div.info_icon {
    display: flex;
    align-items: center;
    background-color: $help-icon-bg-color;
    border-radius: $border-radius-left;

    img {
      width: 6px;
      height: 12px;
      padding: 0.8 * $spacing;
    }
  }

  div.help_text {
    flex-grow: 1;
    padding: $spacing;
    background-color: $help-bg-color;
    border-radius: $border-radius-right;

    a:hover {
      text-decoration: none;
    }

    table.help {
      border-collapse: collapse;

      td {
        padding-right: $spacing;
        vertical-align: top;
      }
    }

    tt {
      font-family: $font-family-courier;
      color: $help-tt-font-color;
    }
  }
}

/*--Popupmenu--------------------------------------------------------------.
|       ____                                                               |
|      |  _ \ ___  _ __  _   _ _ __  _ __ ___   ___ _ __  _   _            |
|      | |_) / _ \| '_ \| | | | '_ \| '_ ` _ \ / _ \ '_ \| | | |           |
|      |  __/ (_) | |_) | |_| | |_) | | | | | |  __/ | | | |_| |           |
|      |_|   \___/| .__/ \__,_| .__/|_| |_| |_|\___|_| |_|\__,_|           |
|                 |_|         |_|                                          |
'-------------------------------------------------------------------------*/

body.main .popup_menu {
  position: absolute;
  z-index: 50;
  min-width: 300px;
  color: $font-color-white;
  white-space: normal;
  background-color: $bg-color-secondary;
  border: 1px solid $color-table-border;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba($black, 0.1);

  div.wrapper {
    position: relative;
  }

  div.content {
    padding: 5px 8px;
  }

  // Resizable popup menus built in JS
  &.resizable div.content {
    min-width: 312px;
    min-height: 150px;
    overflow: auto;
    resize: both;
  }

  img {
    width: 12px;
    height: 12px;
    margin-right: 3px;
    vertical-align: bottom;

    &.emblem {
      width: 10px;
      height: 10px;
    }
  }

  ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  span {
    padding-left: 0;
    margin-top: 8px;
    font-weight: $font-weight-bold;
  }

  li:first-child span {
    margin-top: 0;
  }
}

body.main .popup_menu {
  a,
  span {
    display: block;
    padding-top: 1px;
    padding-bottom: 1px;
    color: $font-color;
    text-align: left;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
    cursor: pointer;
  }

  span.emblem {
    display: initial;
  }
}

#popup_menu .icons {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 392px;
  min-height: 150px;

  ul {
    height: 21px;
    padding: 0;
    margin: 0;
    list-style: none;
    border-bottom: 1px solid $line-color;
  }

  li {
    float: left;

    a {
      display: block;
      height: 21px;
      padding: 0 5px;
      line-height: 21px;

      &:hover {
        text-decoration: none;
        background-color: $line-color;
      }
    }

    &.active a {
      border-bottom: 1px solid $icons-popup-active-color;
    }
  }

  div.icon_container {
    position: absolute;
    top: 26px;
    right: 0;
    bottom: 38px;
    left: 0;
    padding: 5px;
    overflow-y: auto;
  }

  a.icon {
    display: inline-block;
    cursor: pointer;

    span {
      display: none;
    }
  }

  &.show_names a.icon {
    width: 180px;

    span {
      display: inline-block;
      width: 142px;
      margin: 0;
      overflow: hidden;
      font-weight: $font-weight-default;
      line-height: 19px;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: middle;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  img.icon {
    width: 20px;
    height: 20px;
  }

  div.buttons {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
}

/*--Various----------------------------------------------------------------.
|                __     __         _                                       |
|                \ \   / /_ _ _ __(_) ___  _   _ ___                       |
|                 \ \ / / _` | '__| |/ _ \| | | / __|                      |
|                  \ V / (_| | |  | | (_) | |_| \__ \                      |
|                   \_/ \__,_|_|  |_|\___/ \__,_|___/                      |
|                                                                          |
'-------------------------------------------------------------------------*/

div.log_output,
.crash_report pre {
  padding: 8px 16px;
  margin: 16px;
  font-family: $font-family-monospace;
  font-weight: $font-weight-default;
  background: $log-output-color;
  border: 1px solid $color-table-border;
  border-radius: $theme-border-radius;
  box-shadow: none;
}

div.log_output {
  overflow-x: scroll;
  vertical-align: top;

  pre {
    font-family: $font-family-monospace;
    color: $font-color;
  }
}

a.element_dragger {
  cursor: move;

  &:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
  }
}

.dragging {
  cursor: move;
  background-color: $dragging-bg-color;
  transform: scale(1.005);
  box-shadow: 0 2px 10px 0 rgba($black, 0.6);
  -webkit-transform: scale(1.005);
  -moz-transform: scale(1.005);
  -ms-transform: scale(1.005);
  -o-transform: scale(1.005);
}

/*-------------------------------------------------------------------------.
|         ____       _                                                     |
|        |  _ \  ___| |__  _   _  __ _  __   ____ _ _ __ ___               |
|        | | | |/ _ \ '_ \| | | |/ _` | \ \ / / _` | '__/ __|              |
|        | |_| |  __/ |_) | |_| | (_| |  \ V / (_| | |  \__ \              |
|        |____/ \___|_.__/ \__,_|\__, |   \_/ \__,_|_|  |___/              |
|                                |___/                                     |
+--------------------------------------------------------------------------+
| html.debug_vars() outputs the variables in the current URL.              |
'-------------------------------------------------------------------------*/

table.debug_vars {
  border-collapse: collapse;

  th,
  td {
    padding: 0.5 * $spacing $spacing;
    text-align: left;
    border: 1px solid $color-table-border;
  }

  th,
  td.left {
    font-weight: $font-weight-bold;
  }

  td.right {
    font-family: $font-family-courier;
  }
}

/* Popup for adding to visuals (Dashboard, Reports */
div.popup_trigger {
  position: relative;
  display: inline-block;

  img.iconbutton {
    padding: 0;
    filter: $iconbutton-filter;
  }

  &[id*="popup_trigger_move"] img.iconbutton {
    filter: none;
  }
}

table.data.job_details {
  th {
    width: 150px;
  }

  td.state {
    text-align: left;
  }

  div.log_output {
    margin: 0;
  }
}

table.data.job_table td {
  &.job_actions {
    width: 50px;
  }

  &.state {
    width: 50px;
    text-align: left;
  }

  &.job_started {
    width: 160px;
  }

  &.job_pid {
    width: 40px;
    text-align: right;
  }

  div.info {
    padding: $wato-info-padding;
    margin: $wato-info-margin;
    background-color: $data-container-bg-color;
  }
}

/* Tags */
/* FIXME: This section is really messy and should be cleaned up */
.tagify {
  $self: &;

  border: none;

  #{ $self }__input {
    flex-grow: 0;
    padding: $tag-padding;
    margin-left: 0;
  }

  &.tagify--hasMaxTags #{ $self }__input {
    display: none;
  }

  &__input::before {
    line-height: 1.2em;
    color: inherit;
  }

  &__input:not(:empty)::before {
    content: none;
  }

  &[readonly] tag > div {
    padding: $tag-padding;
  }

  a {
    margin-right: $spacing;

    tag {
      margin-right: 0;
    }
  }

  tag {
    margin-right: $spacing;

    > div {
      position: relative;
      line-height: 1.1;
      padding: $tag-padding;
      padding-right: list.nth($tag-padding, 2) * 5;
      color: $font-color;
    }

    x {
      position: absolute;
      right: 0;
      z-index: 1;
      margin-right: 0;
      font-size: $font-size-small;
      line-height: 14px;
    }

    &,
    &.discovered {
      &:hover:not([readonly]) div {
        opacity: $tag-hover-opacity;
        box-shadow: none;
      }
    }
  }

  // Display input always non-colored
  &:not([readonly]) tag {
    > div,
    &:hover > div {
      background: $input-background-color;
      opacity: 1;
      color: $font-color-black;
    }
  }

  &__tag-text {
    color: $font-color;
  }

  tag,
  &[readonly] tag {
    > div {
      background: rgba($tag-color, $tag-opacity);
      border-radius: $theme-border-radius;
      box-shadow: none;
      animation: none;

      &::before {
        content: none; /* don't apply normal tagify style */
      }
    }

    &.explicit > div {
      background: $tag-explicit-color;
    }

    &.discovered > div {
      background: rgba($tag-discovered-color, $tag-discovered-opacity);
    }

    &.changed > div {
      background: rgba($tag-changed-color, $tag-discovered-opacity);
      ::before {
        background: rgba($tag-changed-color-light, $tag-discovered-opacity);
        content: url("images/icon_service_label_update.svg");
      }
    }

    &.added > div {
      background: rgba($tag-added-color, $tag-discovered-opacity);
      ::before {
        background: rgba($tag-added-color-light, $tag-discovered-opacity);
        content: url("images/icon_service_label_add.svg");
      }
    }

    &.removed > div {
      background: rgba($tag-removed-color, $tag-discovered-opacity);
      span {
        text-decoration: line-through;
      }
      ::before {
        background: rgba($tag-removed-color-light, $tag-discovered-opacity);
        content: url("images/icon_service_label_remove.svg");
      }
    }

    &.ruleset > div {
      background: rgba($tag-ruleset-color, $tag-opacity);
    }

    &.changed,
    &.removed,
    &.added {
      div {
        padding: 0 5px 0 0;
      }
      ::before {
        display: inline-block;
        border-radius: 4px 0 0 4px;
        padding: 5px 5px 1.5px 5px;
        margin-right: 4px;
      }
    }

    div span.tagify__tag-text {
      display: inline-flex;
      align-items: center;
    }

    &.changed,
    &.removed,
    &.added,
    &.explicit,
    &.ruleset {
      > div span.tagify__tag-text {
        color: $font-color-white;
      }
    }
  }

  &:hover {
    border-color: none;
  }

  a tag {
    cursor: pointer;
  }

  &__dropdown {
    z-index: 1001; /* filter forms have z-index: 1000 and this needs to be above */
    background: $input-background-color;
    border: none;
    box-shadow: none;

    &__wrapper {
      background: $input-background-color;
      border: 1px solid $input-dropdown-border-color;
      border-radius: 4px;
    }

    &__item {
      margin: 1px;

      &--active {
        color: $font-color-green;
        background-color: $input-background-color;
      }
    }
  }
}

.tagify.display[readonly] tag {
  padding: 2px 0;
}

div#saas_error_page {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 770px;
  height: 605px;
  margin: auto;
  color: $font-color;
  background: transparent;

  div#error_container {
    position: relative;
    top: 187px;
    left: 10px;
    width: 450px;
    height: auto;
    margin: -30px auto 10px;
    background: $navigation-bg-color;
    border-radius: 8px;
    padding: 2.5 * $spacing 4 * $spacing;
    box-sizing: border-box;

    h1 {
      margin: 0 0 2 * $spacing;
    }

    div.error_message span {
      display: block;
    }

    input.buttonlink {
      margin: 0.5 * $spacing 0;
    }

    div.support_info {
      margin-top: 2 * $spacing;
    }
  }
}
